<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-10-22 10:46:45
 * @FilePath: \wczd-mobile\src\pages\task\task-edit.vue
-->
<template>
  <div class="task-info">
    <div class="factor-main">
      <div class="factor-title">一、基本信息</div>
      <div class="factor-form">
        <div class="form-padding">
          <div class="form-block">
            <div class="label">风险点</div>
            <div class="text">{{riskInfo.ancestorsName}}-{{riskInfo.riskTypeName}}</div>
          </div>
          <div class="form-block">
            <div class="label">风险等级</div>
            <div class="text">
              <div :class="[riskLevelClass(riskInfo)]">
                {{ typeFormatter(riskInfo) }}
              </div>
            </div>
          </div>
          <div class="form-block">
            <div class="label">隐患个数</div>
            <div class="text">{{riskInfo.taskDangerCount}}</div>
          </div>
          <div class="form-block">
            <div class="label">已整改数</div>
            <div class="text">{{riskInfo.taskDangerDownCount}}</div>
          </div>
          <div class="form-block">
            <div class="label">排查内容</div>
            <div v-for="(item,index) in inspectionItemLst">{{index+1}}.{{item.itemName}}</div>
          </div>
        </div>
      </div>

      <div class="factor-title">二、最近排查</div>
      <div class="factor-form" v-if="newestInspectionTaskRes.isInspection">
        <div class="form-padding">
          <div class="form-block">
            <div class="label">排查人</div>
            <div class="text">{{newestInspectionTaskRes.inspectionName}}</div>
          </div>
          <div class="form-block">
            <div class="label">排查状态</div>
            <div class="text">
              <div :style="{color:newestInspectionTaskRes.isInspection==='0'?'#F54A13':newestInspectionTaskRes.isInspection==='1'?'#FFB500':'#17D46F'}">{{newestInspectionTaskRes.isInspection==='0'?'未排查':newestInspectionTaskRes.isInspection==='1'?'排查中':'已排查'}}</div>
            </div>
          </div>
          <div class="form-block">
            <div class="label">排查情况</div>
            <div v-for="(citem,cindex) in whnewestInspectionTaskResDetailList" :key="cindex">
              <div :style="{'background-color':citem.backgroundColor}" :class="`itemOrder${citem.itemOrder}`" class="inspection-content">
                <div :style="{'color':citem.itemRes==='1'?'#17D46F':citem.itemRes==='2'?'#F54A13':''}">{{citem.itemOrder}}.{{citem.itemName}}{{citem.itemRes==='1'?'【符合】':citem.itemRes==='2'?'【不符合】':''}}</div>
                <div class="picture-block" v-if="citem.itemRes==='2'">
                  <div class="line-title">备注</div>
                  <div class="line-content">{{citem.remark}}</div>
                </div>
                <div class="picture-block" v-if="citem.itemRes==='2'">
                  <div class="line-title">现场照片</div>
                  <ImageUpload :remove="false" :_max="0" @imageUrlCallBack='imageUrlCallBack' :imgUrlData='citem.fileUrlArr' :_type="'image'+citem.itemOrder"></ImageUpload>
                </div>
                <div class="picture-block" v-if="citem.itemRes==='2'">
                  <div class="line-title">视频</div>
                  <ImageUpload :remove="false" :_max="0" :_mediaType="'video'" @imageUrlCallBack='imageUrlCallBack' :imgUrlData='citem.videoUrlArr' :_type="'video'+citem.itemOrder"></ImageUpload>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>无</div>
    </div>
  </div>
</template>

<script>
import { listRiskFactor, getRiskCatalog, getInspectionDetailByUniqueCode } from '@/api/task'
import ImageUpload from "@/pages/component/imageUpload/imageUpload.vue";

export default {
  name: 'task-info',
  props: ['objUniqueCode'],
  components: { ImageUpload },
  data () {
    return {
      riskLevelSelect: [],
      riskInfo: {},
      factorList: [],
      whnewestInspectionTaskResDetailList: [],
      newestInspectionTaskRes: {
        inspectionName: '',
        isInspection: ''
      },
      inspectionItemLst: [],
    }
  },
  onLoad: function (option) {

  },
  created () {
    this.getDicts('risk_level').then((response) => {
      this.riskLevelSelect = response.data
    })
    this.listRiskFactor()
    this.getRiskCatalog();
    this.getInspectionDetailByUniqueCode()
  },
  computed: {
    riskLevelClass () {
      return function (row) {
        if (row.riskLevel === '1') {
          return 'riskLevel1'
        } else if (row.riskLevel === '2') {
          return 'riskLevel2'
        } else if (row.riskLevel === '3') {
          return 'riskLevel3'
        } else if (row.riskLevel === '4') {
          return 'riskLevel4'
        }
      }
    },
  },
  methods: {
    // 菜单状态字典翻译
    typeFormatter (row) {
      return this.selectDictLabel(this.riskLevelSelect, row.riskLevel)
    },
    getRiskCatalog () {
      if (this.objUniqueCode) {
        getRiskCatalog({ id: this.objUniqueCode }).then(res => {
          res.data.ancestorsName = res.data.ancestorsName.replace(/,/g, '-')
          this.riskInfo = res.data
        })
      }
    },
    listRiskFactor () {
      if (!this.objUniqueCode) {
        return;
      }
      listRiskFactor({ riskId: this.objUniqueCode }).then(res => {
        this.factorList = res.rows
      })
    },
    //获取路径节点
    getInspectionDetailByUniqueCode () {
      getInspectionDetailByUniqueCode({ objUniqueCode: this.objUniqueCode }).then(res => {
        if (res.newestInspectionTaskRes) {
          this.newestInspectionTaskRes = res.newestInspectionTaskRes
        }

        this.inspectionItemLst = res.inspectionItemLst
        let num = 0;
        for (let i = 0; i < res.newestInspectionTaskResDetail?.length; i++) {
          res.newestInspectionTaskResDetail[i].itemOrder = ++num;
          res.newestInspectionTaskResDetail[i].backgroundColor = '';
          res.newestInspectionTaskResDetail[i].remark = res.newestInspectionTaskResDetail[i].remark;
          res.newestInspectionTaskResDetail[i].fileUrlArr = JSON.parse(res.newestInspectionTaskResDetail[i].fileUrls || '[]')
          res.newestInspectionTaskResDetail[i].videoUrlArr = JSON.parse(res.newestInspectionTaskResDetail[i].videoUrls || '[]')
        }
        this.whnewestInspectionTaskResDetailList = res.newestInspectionTaskResDetail
      })
    },
  },
}
</script>

<style scoped lang="scss">
.task-info {
  .factor-main {
    padding-bottom: 50upx;
    .factor-title {
      background: white;
      color: #009fdf;
      padding: 0 30upx;
      font-size: 40upx;
      font-weight: 600;
    }
  }

  .factor-form {
    margin-top: 0;
    margin-bottom: 20upx;
    background-color: white;

    .form-padding {
      padding: 0 30upx;
    }
    .factor-red {
      background: #fff3ea;
      padding: 0 30upx;
    }
  }
  .form-block {
    padding: 10upx 0;
    color: #444444;
    border-bottom: 1px solid #f1f1f1;

    .label {
      color: #222222;
      font-weight: bold;
    }
  }
}
.line-title {
  font-weight: 600;
  color: #000000;
  font-size: 28upx;
}
.line-content{
	background: #f5f5f5;
	padding: 3upx 7upx;
}
</style>
